<!-- 书籍详情页 -->
<template>
  <div class="all_box">
    <el-row class="book_about">
      <el-col :span="4" :offset="2" class="book_face">
        <img src="../../../public/images/book10.jpg" class="image" />
      </el-col>
      <el-col :span="5" :offset="2" class="book_charfile">
        <div class="charactor">
          <span class="book_tittle">此处绑定书籍标题</span>
          <div class="inro">
            <span>此处绑定书籍简介</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="3" class="book_opration">
        <ul>
          <li>
            <el-button round>下载</el-button>
          </li>
          <li>
            <el-button round>收藏</el-button>
          </li>
          <li>
            <el-button round>点赞</el-button>
          </li>
          <li>
            <el-button round>收藏</el-button>
          </li>
        </ul>
      </el-col>
    </el-row>
    <hr />
    <el-row class="book_comment">
      <div class="comment_input">
        <el-input v-model="MyComment" placeholder="请输入你的评论..."></el-input>
      </div>
      <div>

      </div>
    </el-row>
  </div>
</template>

<!-- 定义JS变量 -->
<script>
  export default {
    data() {
      return {
        MyComment: ''
      }
    },
    methods: {

    }
  }
</script>


<!-- 防止组件冲突 -->
<style lang="less" scoped>
  .all_box {
    .book_about {
      position: relative;
      margin-bottom: 20px;

      .book_face{
        .image {
          width: 100%;
          display: block;
        }
      }

      .book_charfile{
        .charactor {
          .book_tittle {
            font-size: large;
            font-weight: bold;
          }

          .inro {}
        }
      }

      .book_opration{
        ul li{
           list-style: none;
        }
      }

    }

    .book_comment{
      .comment_input{
        position: relative;
        width: 400px;
        left: 120px;
      }
    }
  }
</style>
